<template>
	<view>
		<cu-custom :isBack="true" bgColor="bg-blue">
			<template slot="backText">
				<text class="cuIcon-back" @tap="beforePage"></text>
			</template>
			<block slot="content">生产概要</block>
		</cu-custom>
		<!-- 主题内容 -->
		<view  class="public-main padding-t">
			<view class="public-main-info">
				<!-- 产量统计 -->
				<view class="u-main">
					<view class="u-main-title">
						统计数据
					</view>
					<view class="u-main-line"></view>
					<view class="u-main-info">
						<view class="u-flex">
							<view class="chan-item" v-for="(item, index) in chanList" :key="index">
								<view class="chan-item-title u-font-weight">{{item.title}}</view>
								<view class="chan-item-value u-font-weight">{{item.value}}</view>
								<view class="chan-item-name">{{item.unit}}</view>
								<view class="chan-item-value u-font-weight">{{item.blocks}}</view>
								<view class="chan-item-name">轧制块数(块)</view>
								<view class="chan-item-btn" @click="getAllChanInfo(item.param)">更多</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 班组信息 -->
				<view class="u-main">
					<view class="u-main-title">
						<text>班组信息</text>
						<text class="cuIcon-right text-blue" style="font-size: 30upx;" @tap="goTeamPage"></text>
					</view>
					<view class="u-main-line"></view>
					<view class="u-main-info">
						<view class="radar-charts">
							<u-charts
							 :canvas-id="groupData.id" 
							 :chartType="groupData.chartType" 
							 :cWidth="groupData.radarWidth" 
							 :cHeight="groupData.radarHeight" 
							 :opts="groupData.opts"
							 :ref="groupData.id" />
						</view>
						<view class="u-flex tearm-box">
							<view class="team-info">
								<view class="team-img">
									<image class="team-img-info" src="../../../static/img/sheng.png" mode="widthFix"></image>
									<view class="">
										<view class="sheng-title u-font-weight">生产正常</view>
										<view class="u-font-weight6" style="font-size: 24upx;">当前状态</view>
									</view>
								</view>
								<view class="team-info-real">
									<text class="u-font-weight6 team-info-realNow">当前班组</text>
									<text class="u-font-weight">{{groupInfo.team}}</text>
								</view>
								<view class="team-info-real">
									<text class="u-font-weight6 team-info-realNow">轧制块数</text>
									<text class="u-font-weight">{{groupInfo.finishedProduct}}</text>
								</view>
								<view class="team-info-real">
									<text class="u-font-weight6 team-info-realNow">轧制重量</text>
									<text class="u-font-weight">{{groupInfo.actual}}</text>
								</view>
							</view>
							<view class="team-info">
								<view class="team-img">
									<image class="team-img-info" src="../../../static/img/zha.png" mode="widthFix"></image>
									<view class="">
										<view class="sheng-title u-font-weight">{{groupInfo.rollingInterval}}min</view>
										<view class="u-font-weight6" style="font-size: 24upx;">轧制间隔</view>
									</view>
								</view>
								<view class="team-info-real">
									<text class="u-font-weight6 team-info-realNow">生产时长</text>
									<text class="u-font-weight">{{groupInfo.yunxingshijian}}</text>
								</view>
								<view class="team-info-real">
									<text class="u-font-weight6 team-info-realNow">故障时间</text>
									<text class="u-font-weight">{{groupInfo.downTime}}</text>
								</view>
								<view class="team-info-real">
									<text class="u-font-weight6 team-info-realNow">当前状态</text>
									<text class="u-font-weight">{{groupInfo.state}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 轧制信息 -->
				<view class="u-main">
					<view class="u-main-title">
						轧制信息
					</view>
					<view class="u-main-line"></view>
					<view class="u-main-info">
						<view>
							<!-- 粗轧 -->
							<view class="rolling-main">
								<view class="rolling-main-title u-font-weight">
									粗轧区域
								</view>
								<view class="rolling-main-info">
									<image class="roll-image" src="../../../static/img/cu.png"></image>
									<view class="rolling-main-info-main">
										<view class="layout-flex-class">
											<view class="param-class u-font-weight6 roll-title">钢 卷 号</view>
											<view class="u-font-weight">{{rollLineCuInfo.COIL_NO}}</view>
										</view>
										<view class="layout-flex-class">
											<view class="param-class u-font-weight6">终轧温度</view>
											<view class="u-font-weight">{{rollLineCuInfo.mubiaoCT}}</view>
										</view>
										<view class="layout-flex-class">
											<view class="param-class u-font-weight6 gangzhong-jiange">钢种</view>
											<view class="u-font-weight">{{rollLineCuInfo.STEEL_GRADE}}</view>
										</view>
									</view>
									<view class="rolling-main-info-main">
										<view class="layout-flex-class">
											<view class="param-class u-font-weight6">板坯规格</view>
											<view class="u-font-weight">{{rollLineCuInfo.Coil_info}}</view>
										</view>
										<view class="layout-flex-class">
											<view class="param-class u-font-weight6">板坯重量</view>
											<view class="u-font-weight">{{rollLineCuInfo.COIL_WEIGHT}}t</view>
										</view>
										<view class="layout-flex-class">
											<view class="param-class u-font-weight6">成品规格</view>
											<view class="u-font-weight">{{rollLineCuInfo.Pro_info}}</view>
										</view>
									</view>
								</view>	
								</view>
							</view>
							<!-- 精轧 -->
							<view class="rolling-main">
								<view class="rolling-main-title">
									精轧区域
								</view>
								<view class="rolling-main-info">
									<image class="roll-image" src="../../../static/img/jing.png"></image>
									<view class="rolling-main-info-main">
										<view class="layout-flex-class">
											<view class="param-class u-font-weight6 roll-title">钢 卷 号</view>
											<view class="u-font-weight">{{rollLineJingInfo.COIL_NO}}</view>
										</view>
										<view class="layout-flex-class">
											<view class="param-class u-font-weight6 gangzhong-jiange">钢种</view>
											<view class="u-font-weight">{{rollLineJingInfo.STEEL_GRADE}}</view>
										</view>
										<view class="layout-flex-class">
											<view class="param-class u-font-weight6">目标凸度</view>
											<view class="u-font-weight">{{rollLineJingInfo.mubiaotu}}</view>
										</view>
									</view>
									<view class="rolling-main-info-main">
										<view class="layout-flex-class">
											<view class="param-class u-font-weight6">板坯规格</view>
											<view class="u-font-weight">{{rollLineJingInfo.Coil_info}}</view>
										</view>
										<view class="layout-flex-class">
											<view class="param-class u-font-weight6">板坯重量</view>
											<view class="u-font-weight">{{rollLineJingInfo.COIL_WEIGHT}}t</view>
										</view>
										<view class="layout-flex-class">
											<view class="param-class u-font-weight6">成品规格</view>
											<view class="u-font-weight">{{rollLineJingInfo.Pro_info}}</view>
										</view>
									</view>
								</view>	
								</view>
							</view>
							<!-- 卷取 -->
							<view class="rolling-main">
								<view class="rolling-main-title">
									卷取区域
								</view>
								<view class="rolling-main-info">
									<image class="roll-image" src="../../../static/img/juan.png"></image>
									<view class="rolling-main-info-main">
										<view class="layout-flex-class">
											<view class="param-class u-font-weight6 roll-title">钢 卷 号</view>
											<view class="u-font-weight">{{rollLineCengInfo.COIL_NO}}</view>
										</view>
										<view class="layout-flex-class">
											<view class="param-class u-font-weight6 gangzhong-jiange">钢种</view>
											<view class="u-font-weight">{{rollLineCengInfo.STEEL_GRADE}}</view>
										</view>
										<view class="layout-flex-class">
											<view class="param-class u-font-weight6">层冷温度</view>
											<view class="u-font-weight">{{rollLineCengInfo.cengTemp}}</view>
										</view>
									</view>
									<view class="rolling-main-info-main">
										<view class="layout-flex-class">
											<view class="param-class u-font-weight6">板坯规格</view>
											<view class="u-font-weight">{{rollLineCengInfo.Coil_info}}</view>
										</view>
										<view class="layout-flex-class">
											<view class="param-class u-font-weight6">板坯重量</view>
											<view class="u-font-weight">{{rollLineCengInfo.COIL_WEIGHT}}t</view>
										</view>
										<view class="layout-flex-class">
											<view class="param-class u-font-weight6">成品规格</view>
											<view class="u-font-weight">{{rollLineCengInfo.Pro_info}}</view>
										</view>
									</view>
								</view>	
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { post } from "@/lib/Util.js";
	import { GET_SELECT_COUNT, GET_SELECT_TEAM, GET_RADAR_INFO } from '@/common/api/prodSum.js'
	import uCharts from '@/components/u-charts/component.vue';
	export default {
		components: {
			uCharts
		},
		data() {
			return {
				chanList: [
					{
						title: '日产量',
						value: '00000',
						blocks: '00000',
						unit: '产量(t)',
						param: 'day'
					},
					{
						title: '月产量',
						value: '00000',
						blocks: '00000',
						unit: '产量(t)',
						param: 'month'
					},
					{
						title: '年产量',
						value: '00000',
						blocks: '00000',
						unit: '产量(t)',
						param: 'year'
					}
				],
				groupData: {
					radarWidth: uni.upx2px(750),
					radarHeight: uni.upx2px(744),
					chartType: "radar",
					extraType: "",
					id: "group",
					opts: {
						categories: ['厚度', '卷取', '终温','宽度', '凸度', '平度'],
						series: [{
							data: [0, 0, 0, 0, 0, 0]
						}]
					}
				},
				groupRandarInfo: {
					thickness: '厚度', // 厚度
					rollTemp: '卷取', // 层冷=卷温度
					finalTemp: '终温', // 终轧温度
					width: '宽度', // 宽度
					convexity: '凸度', // 凸度
					flatness: '平度' // 平整度
				},
				rollLineCuInfo: {
					COIL_NO: 0, // 钢卷号,
					Pro_info: 0, // 成品规格
					mubiaotu: 0, // 目标凸度
					Coil_info: 0 ,// 板坯信息
					mubiaoCT: 0, // 目标CT
					COIL_WEIGHT: 0, // 板坯重量
					STEEL_GRADE: 0 // 钢种
				},
				rollLineJingInfo: {
					COIL_NO: 0, // 钢卷号,
					Pro_info: 0, // 成品规格
					mubiaotu: 0, // 目标凸度
					Coil_info: 0 ,// 板坯信息
					mubiaoCT: 0, // 目标CT
					COIL_WEIGHT: 0, // 板坯重量
					STEEL_GRADE: 0 // 钢种
				},
				rollLineCengInfo: {
					COIL_NO: 0, // 钢卷号,
					Pro_info: 0, // 成品规格
					mubiaotu: 0, // 目标凸度
					Coil_info: 0 ,// 板坯信息
					mubiaoCT: 0, // 目标CT
					COIL_WEIGHT: 0, // 板坯重量
					STEEL_GRADE: 0 // 钢种
				},
				groupInfo: {
					downTime: '00:00:00',
					actual: '0',
					finishedProduct: '0',
					failProduct: '0',
					yunxingshijian: '00:00:00',
					team: '--',
					state: '--',
					rollingInterval: '0000'
				}
			}
		},
		onLoad() {
			this.getProd()
			this.getRollInfo()
			this.getGroupInfo()
			this.getRandarInfo()
		},
		methods: {
			beforePage() {
				uni.navigateBack({
					delta: 1
				});
			},
			getAllChanInfo(val) {
				uni.navigateTo({
					url:'/pages/modules/prodSum/chan?param=' + val
				})
			},
			goTeamPage() {
				uni.navigateTo({
					url:'/pages/modules/prodSum/team'
				})
			},
			// 获取产量信息
			async getProd() {
				let res = await post(GET_SELECT_COUNT, {})
				if(res.code == 0) {
					this.chanList[0].value = Number(res.data.day.yield / 1000).toFixed(0)
					this.chanList[0].blocks = res.data.day.number
					
					this.chanList[1].value = Number(res.data.month.yield / 1000 / 10000).toFixed(2) + '万'
					this.chanList[1].blocks = res.data.month.number
					
					this.chanList[2].value = Number(res.data.year.yield / 1000 / 10000).toFixed(2) + '万'
					this.chanList[2].blocks = res.data.year.number
				}
			},
			// 轧线信息 - 粗轧
			async getRollInfo() {
				let data = {
					"tags": [
						{
							"name": "RMSetPass",
							"ts":"1"
						},
						{
							"name": "CTCSet",
							"ts":"1"
						},
						{
							"name": "FMSetStd",
							"ts":"1"
						}
					],
					"msgs": []
				}
				let res = await post('webservice/getHmiData', data)
				if(res.code == 0) {
					this.rollLineCuInfo.COIL_NO = res.data.tagList[0].dataList[0].MatId
					this.rollLineCuInfo.Pro_info = Number(res.data.tagList[2].dataList[0].StripThkRaw).toFixed(0) +'*'+ Number(res.data.tagList[2].dataList[0].StripWidRaw).toFixed(0)
					this.rollLineCuInfo.STEEL_GRADE = res.data.tagList[0].dataList[0].SteelGrade
					this.rollLineCuInfo.COIL_WEIGHT = Number(res.data.tagList[0].dataList[0].SlabWet / 1000).toFixed(2)
					this.rollLineCuInfo.Coil_info = Number(res.data.tagList[0].dataList[0].SlabThkRaw).toFixed(0) +'*'+ Number(res.data.tagList[0].dataList[0].SlabWidRaw).toFixed(0)
					this.rollLineCuInfo.mubiaoCT = res.data.tagList[0].dataList[0].StripTemp
					
					this.rollLineCengInfo.COIL_NO = res.data.tagList[1].dataList[0].MatId 
					this.rollLineCengInfo.Pro_info = Number(res.data.tagList[1].dataList[0].StripThkRaw).toFixed(0) +'*'+ Number(res.data.tagList[1].dataList[0].StripWidRaw).toFixed(0)
					this.rollLineCengInfo.STEEL_GRADE = res.data.tagList[1].dataList[0].SteelGrade
					this.rollLineCengInfo.COIL_WEIGHT = Number(res.data.tagList[1].dataList[0].SlabWet / 1000).toFixed(2)
					this.rollLineCengInfo.Coil_info = Number(res.data.tagList[1].dataList[0].SlabThkRaw).toFixed(0) +'*'+ Number(res.data.tagList[1].dataList[0].SlabWidRaw).toFixed(0) 
					this.rollLineCengInfo.cengTemp = res.data.tagList[1].dataList[0].CoilTemp
					
					this.rollLineJingInfo.COIL_NO = res.data.tagList[2].dataList[0].MatId
					this.rollLineJingInfo.Pro_info = Number(res.data.tagList[2].dataList[0].StripThkRaw).toFixed(0)  +'*'+ Number(res.data.tagList[2].dataList[0].StripWidRaw).toFixed(0) 
					this.rollLineJingInfo.STEEL_GRADE = res.data.tagList[2].dataList[0].SteelGrade
					this.rollLineJingInfo.COIL_WEIGHT = Number(res.data.tagList[2].dataList[0].SlabWet / 1000).toFixed(2)
					this.rollLineJingInfo.Coil_info = Number(res.data.tagList[2].dataList[0].SlabThkRaw).toFixed(0)  +'*'+ Number(res.data.tagList[2].dataList[0].SlabWidRaw).toFixed(0) 
					this.rollLineJingInfo.mubiaoCT = res.data.tagList[2].dataList[0].StripTemp
					this.rollLineJingInfo.mubiaotu = res.data.tagList[2].dataList[0].CRAim
				}
			},
			// 获取当前班组信息
			async getGroupInfo() {
				let res = await post(GET_SELECT_TEAM, {})
				if(res.code == 0) {
					this.groupInfo.downTime = res.data.failureTime // 故障时长
					this.groupInfo.actual = Number(res.data.rollingWeight / 1000).toFixed(0) // 实际生产重量
					this.groupInfo.finishedProduct = res.data.number // 成品块数
					this.groupInfo.yunxingshijian = res.data.productionTime // 生产时长
					this.groupInfo.team = res.data.currentTeam // 班组
					this.groupInfo.state = res.data.state // 状态
					this.groupInfo.rollingInterval = res.data.rollingInterval // 轧制间隔
				}
			},
			// 获取雷达图数据
			async getRandarInfo() {
				let res = await post(GET_RADAR_INFO, {})
				if(res.code == 0) {
					let data = res.data
					let dataArray = [] // 存放数据结果
					let xData = [] // 存放x轴
					for(const item in this.groupRandarInfo) {
						dataArray.push(data[item])
						xData.push(this.groupRandarInfo[item] + Number(data[item]).toFixed(0) + '%')
					}
					this.groupData.opts.categories = xData
					this.groupData.opts.series[0].data = dataArray
				}
			},
			
		}
	}
</script>

<style>
	/* 内容模块 */
	.tearm-box {
		padding: 30upx 40upx 30upx 40upx;
	}
	.team-info {
		width: 50%;
		height: auto;
		margin-left: 40upx;
	}
	.team-img {
		display: flex;
		margin-bottom: 20upx;
	}
	.team-img-info {
		width: 80upx;
		height: 72upx;
		margin-right: 10upx;
	}
	.sheng-title {
		font-size: 34upx;
	}
	.radar-charts {
		width: 750upx;
		height: 744upx;
		background: rgba(48,136,244,0.10);
	}
	.team-info-real {
		font-size: 24upx;
		height: 40upx;
		line-height: 40upx;
	}
	
	.u-main-info .chan-item {
		width: 33%;
		padding-left: 20upx;
		border-right: 1px dashed rgba(0,0,0,0.50);
	}
	.u-main-info .chan-item:last-child{
		border-right: none;
	}
	.team-info-realNow {
		margin-right: 10upx;
	}
	.chan-item-title {
		height: 40upx;
		font-size: 28upx;
		line-height: 40upx;
		margin-bottom: 20upx;
	}
	.chan-item-value {
		height: 56upx;
		font-size: 40upx;
	}
	.chan-item-name {
		height: 33upx;
		font-size: 24upx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		text-align: left;
		color: rgba(0,0,0,0.60);
		margin-bottom: 10upx;
	}
	.chan-item-btn {
		width: 80upx;
		height: 40upx;
		background: #ffffff;
		border: 1px solid #3088f4;
		border-radius: 6upx;
		text-align: center;
		font-size: 24upx;
		font-family: PingFang SC, PingFang SC-Bold;
		font-weight: 700;
		color: #3088f4;
		line-height: 40upx;
	}
	
	.rolling-main {
		padding: 20rpx;
	}
	.rolling-main-title {
		height: 40upx;
		font-size: 28upx;
		line-height: 40upx;
		margin-bottom: 24upx;
	}
	.rolling-main-info {
		display: flex;
		justify-content: space-between;
	}
	
	.roll-image {
		width: 125upx;
		height: 110upx;
	}
	.rolling-main-info-m-param {
		height: 30rpx;
		font-size: 24rpx;
	}
	
	.rolling-main-info-main {
		width: calc((100% - 69upx)/2);
	}
	
	.layout-flex-class {
		display: flex;
		font-size: 24rpx;
		height: 33upx;
		line-height: 33upx;
	}
	.param-class {
		height: 33upx;
		line-height: 33upx;
		font-size: 24upx;
		margin-right: 10upx;
	}
	.roll-title {
		letter-spacing: 2upx;
	}
	.gangzhong-jiange {
		letter-spacing: 24upx;
	}
</style>
